// 首页
import React, { useEffect, useState } from 'react'
import { WdHeader, WdListItem, WdNavSider } from '../../../components'
import { getBanners, getList, getListTitle } from '../../../api/home'
import { Swiper, Tabs } from 'react-vant'
import style from './style.module.scss'
import { useRequest, useSetState } from 'ahooks'
import url1 from '../../../assets/images/image/hdpi/common_disease.png'
import url2 from '../../../assets/images/image/hdpi/common_drugs.png'
import { NavLink, useNavigate } from 'react-router-dom'
import { ListItemState } from '../../../types'
import '../../../utils/index'
import { useTitle } from '../../../hooks'
export interface BannerState {
  imageUrl: string
  jumpUrl: string
  rank: number
  title: string
}

export interface ListTitleState { id: number, name: string, sort: number }

const Index: React.FC = () => {
  const navigate = useNavigate()
  // 轮播数据
  const { data: bannersData = [], error, loading } = useRequest(async () => {
    const resp = await getBanners();
    return resp.data.result as BannerState[]
  })
  // 列表标题
  const { data: listTitle = [] } = useRequest(async () => {
    const resp = await getListTitle();
    setListParams({ plateId: resp.data.result[0].id })
    return resp.data.result as ListTitleState[]
  })
  // 列表参数
  const [listParams, setListParams] = useSetState({ plateId: 4, page: 1, count: 10 })
  // 列表
  const { data: list = [], run } = useRequest(async () => {
    const resp = await getList(listParams);
    return resp.data.result as ListItemState[]
  })

  useEffect(() => run(), [listParams])

  const { title, setTitle } = useTitle('维度健康')

  return (
    <div>
      <NavLink to="/con/list">出发</NavLink>
      {/* 头部 */}
      <WdHeader showSearch mode="black"></WdHeader>
      {/* 轮播 */}
      {!loading && <Swiper>
        {
          bannersData.map((v, i) => {
            return <Swiper.Item key={i}>
              <img src={v.imageUrl} alt="" className={style.img} />
            </Swiper.Item>
          })
        }
      </Swiper>}
      <WdNavSider title='知识宝典'></WdNavSider>
      <div className={style.menu_image}>
        <div className={style.item} onClick={() => navigate('/home/know?type=1')}>
          <span>常见病症</span>
          <img src={url1} alt="" />
        </div>
        <div className={style.item} onClick={() => navigate('/home/know?type=2')}>
          <span>常用药品</span>
          <img src={url2} alt="" />
        </div>

      </div>
      <WdNavSider title='问诊咨询'></WdNavSider>
      <WdNavSider title='健康评测'></WdNavSider>
      <WdNavSider title='健康咨询'></WdNavSider>
      {/* 列表标题 */}
      <Tabs sticky onChange={name => setListParams({ plateId: name as number })}>
        {
          listTitle.map(v => {
            return <Tabs.TabPane name={v.id} title={v.name} key={v.id}></Tabs.TabPane>
          })
        }
      </Tabs>
      {/* 列表内容 */}
      <div>
        {
          list.map(v => {
            return <WdListItem item={v} key={v.id} onClick={() => navigate('/home/list/' + v.id)}></WdListItem>
          })
        }
      </div>
    </div>
  )
}
export default Index  